<template>
	<div>
		<!-- v-for="(item, index) in data" :key="index" -->
		<div class="price-list">
			<!-- <div class="price-item" v-for="(count, index) in 5" :key="index"> -->
			<div class="price-item">
				<div class="title">
					<div class="left">
						<span>{{ marketItem.name }}</span>
					</div>
					<div class="right">
						<!-- <span @click="addProduct">添加新产品</span> -->
						<a-select
							placeholder="添加新产品"
							style="width: 120px"
							@change="handleChange(marketItem)"
							v-model="ptype"
							allowClear
						>
							<a-select-option
								v-for="(item, index) in productList"
								:value="index"
								:key="index"
								>{{ item }}</a-select-option
							>
						</a-select>
						<span @click="copyProduct">复制产品</span>
					</div>
				</div>
				<div class="table">
					<ul v-if="Object.keys(productData).length > 0">
						<!-- <li v-for="(count, index) in 4" :key="index"> -->
						<li
							v-for="(item, index) in productData[marketItem.id]"
							:key="index"
						>
							<div class="left">
								<!-- <span>{{ item.cp_status_show }}</span> -->
								<span>{{ productList[item.ptype] }}</span>
							</div>
							<div class="center">
								<span>SKU {{ item.price_count_show }}</span>
							</div>
							<div class="operate">
								<span
									v-has="'market.select'"
									@click="editSku(marketItem.id, item.ptype, item.id_show)"
									>编辑SKU</span
								>
								<a-divider type="vertical" />
								<span @click="deleteSku(item.id)" v-has="'market.delete'"
									>删除</span
								><a-divider type="vertical" />

								<span @click="copySku">拷贝</span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>



<script>
	import marketHttp from "@/api/market"
	import { mapGetters, mapMutations } from "vuex"
	export default {
		props: {
			marketItem: {
				// type: [Array, Object],
				type: [Object],
				default: function () {
					return {}
				},
			},
		},
		data() {
			this.productList = {
				1: "场内转运",
				2: "场内装卸",
				3: "同城配送",
			}
			return {
				ptype: "添加新产品",
				productData: [],
			}
		},
		mounted() {
			// setTimeout(() => {
			// 	console.log(this.marketItem)
			// }, 2000)
			this.getSkuProductData()
		},
		computed: {
			...mapGetters({
				// getMarketId: "getMarketId",
				// getPtype: "getPtype",
			}),
		},
		methods: {
			...mapMutations({
				setAutoOn: "setAutoOn",
				setMarketId: "setMarketId",
				setPtype: "setPtype",
				// setPriceTableStatus: "setPriceTableStatus",
				// setProductId: "setProductId",
			}),
			async getSkuProductData() {
				await marketHttp
					.query()
					.then((response) => {
						// console.log("产品列表数据", response)
						if (response.code !== 1) {
							this.$message.error(response.message)
							return
						}

						this.productData = response.data

						// this.$message.success(response.message)
						// this.productData.push({
						// 	name: this.productList[this.ptype],
						// })
						// this.onChange()
						return
					})
					.catch((e) => {
						console.log(e)
					})
			},

			async handleChange(item) {
				console.log(item, this.ptype)
				// console.log(`selected ${value}`)
				if (!this.ptype) {
					return
				}

				await marketHttp
					.create({
						market_id: item.id,
						ptype: parseInt(this.ptype),
					})
					.then((response) => {
						console.log(response)
						if (response.code !== 1) {
							this.$message.error(response.message)
							return
						}

						this.$message.success(response.message)
						this.getSkuProductData()
						// this.productData.push({
						// 	name: this.productList[this.ptype],
						// })

						// this.onChange()
						return
					})
					.catch((e) => {
						console.log(e)
					})
			},

			editSku(market_id, ptype, id) {
				console.table({
					market_id: market_id,
					ptype: ptype,
					id: id,
				})
				this.setMarketId(market_id)
				this.setPtype(ptype)
				// this.setProductId(id)
				// this.setPriceTableStatus(true)
				this.$router.push("/market/sku/" + id)

				this.setAutoOn(true)
			},
			deleteSku(id) {
				this.$modal.confirm({
					title: "提示",
					content: "确定删除吗？",
					okText: "确定",
					cancelText: "取消",
					centered: true,
					onOk: () => {
						marketHttp.delete(id).then((response) => {
							if (response.code !== 1) {
								this.$message.error(response.message)
								return
							}
							this.$message.success(response.message)
							// this.queryForm()
							this.getSkuProductData()
							return
						})
					},
					onCancel: () => {
						this.$message.warning("删除取消了")
					},
				})
			},
			copySku() {},
			addProduct() {},
			copyProduct() {},
		},
	}
</script>
<style scoped lang='less'>
	.price-list {
		display: grid;
		grid-auto-flow: row;
		margin: 0 20px 10px;
		background: #fff;
		// border: 1px solid rgba(0, 0, 0, 0.1);
		&:last-of-type {
			border-bottom: none;
		}

		.price-item {
			border-bottom: 2px solid rgba(0, 0, 0, 0.4);
			padding: 15px;
			box-sizing: border-box;
			&:last-of-type {
				border-bottom: none;
				border: 1px solid rgba(0, 0, 0, 0.1);
			}
			.title {
				display: flex;
				justify-content: space-between;
				line-height: 50px;
				border-bottom: 2px solid #eee;
				.left {
					width: 200px;
					height: 35px;
					line-height: 35px;
					// border: 1px solid rgba(0, 0, 0, 0.1);
					font-weight: bold;
					text-align: center;
					span {
						cursor: default;
					}
				}
				.right {
					span {
						display: inline-block;
						width: 200px;
						height: 35px;
						line-height: 35px;
						border: 1px solid rgba(0, 0, 0, 0.1);
						text-align: center;
						margin-left: 20px;
						cursor: pointer;
						background-color: #eee;
					}
				}
			}
			.table {
				ul,
				li {
					list-style: none;
					margin: 0;
					padding: 0;
				}
				ul {
					li {
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						// padding-left: 50px;
						margin-top: 10px;
						position: relative;
						.left {
							// position: absolute;
							// left: 5%;
							margin-left: 80px;
							span {
								cursor: default;
							}
						}
						.center {
							margin-left: 100px;
							position: absolute;
							left: 25%;
							transform: translate(-50%, 0);
							span {
								cursor: default;
							}
						}
						.operate {
							position: absolute;
							left: 50%;
							// transform: translate(-50%, 0);
							span {
								margin-right: 10px;
								cursor: pointer;
								color: #4aaf6c;
							}
						}
					}
				}
			}
		}
	}
</style>